<template>
  <div :style="`width:${width}px;`">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :show-timeout="300"
        :collapse="isCollapse"
    >
      <router-link :to="{name:'MainInfo'}">
        <el-menu-item index="1">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
      </router-link>
      <router-link :to="{name:'RoomInfoManager'}">
        <el-menu-item index="2">
          <i class="el-icon-house"></i>
          <span slot="title">房间管理</span>
        </el-menu-item>
      </router-link>
      <router-link :to="{name:'History'}">
        <el-menu-item index="3">
          <i class="el-icon-tickets"></i>
          <span slot="title">历史查询</span>
        </el-menu-item>
      </router-link>
<!--      <router-link :to="{name:'Login'}">-->
<!--        <el-menu-item index="4">-->
<!--          <i class="el-icon-setting"></i>-->
<!--          <span slot="title">临时入口</span>-->
<!--        </el-menu-item>-->
<!--      </router-link>-->

    </el-menu>
  </div>
</template>

<script>
/**
 * HomeAside
 * @module '@/component/HomeAside'
 * @desc 首页侧边栏组件
 * @author 开朗的不得了
 * @date 2023年3月2日15点49分
 * @param {Object} [title]    - 参数说明
 * @param {String} [columns] - 参数说明
 * @example
 *  <aside/>
 **/

export default {
  name: "HomeAside",
  data() {
    return {
      isCollapse: false,
      width: 240,
    };
  },
  mounted() {
    // 控制Aside展开/闭合
    this.$bus.$on('changeCollapse', (data)=>{
      this.isCollapse=data;
      if (this.isCollapse){
        this.width = 60;
      }else {
        this.width = 240;
      }
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="less" scoped>
  .minHeight(){
    height: 100%;
    min-height: calc(100vh - 61px);
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 239px;
    .minHeight();
  }
  .el-menu{
    .minHeight();
  }
  a{
    text-decoration: none;
  }
</style>